<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElAvatar, ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus'
import 'element-plus/dist/index.css'
import { ArrowRight } from '@element-plus/icons-vue'
import { useRoute, useRouter } from "vue-router";
import { logout } from "@/apis/logout";
import { getCurrentInstance } from "vue";
import { getAvatar } from '@/apis/getAvatar';
const { proxy } = getCurrentInstance();
const dropdownVisible = ref(false)
const avatarSize = ref(50) // 初始大小
const router = useRouter()

const props = defineProps({
  iconColor: {
    type: String,
    default: 'white', // 默认颜色为白色
  }
});

const handleMouseEnter = () => {
  avatarSize.value = 70 // 变为原来的两倍
  dropdownVisible.value = true
}

const handleMouseLeave = () => {
  avatarSize.value = 50 // 恢复原来的大小
  setTimeout(() => {
    if (!avatarSize.value) {
      dropdownVisible.value = false
    }
  }, 200)
}

const handleCommand = (command) => {
  console.log(command)
}

const dropdownTop = '60px'; // 固定下拉框的垂直位置
const dropdownLeft = '40px'; // 固定下拉框的水平位置4

const logoutApi = async() => {
  await logout(proxy);
  localStorage.removeItem('token'); // 移除本地存储的 token
  localStorage.removeItem('account')
  router.push('/user/login')
}
const user = localStorage.getItem('account')
const avatarUrl = ref()

onMounted ( async () => {
  const res = await getAvatar(proxy)
  console.log(res)
  avatarUrl.value = res
})
</script>

<template>
  <div class="avatar-container" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
    <el-dropdown :visible-arrow="false" v-model:visible="dropdownVisible" @command="handleCommand">
      <el-avatar @click="router.push(`/home/space/${user}`)" :size="avatarSize" class="avatar"
        :src="avatarUrl"></el-avatar>
      <template #dropdown>
        <el-dropdown-menu class="custom-dropdown-menu">
          <el-dropdown-item command="a" @click="router.push(`/home/space/${user}`)">个人中心
            <el-icon style="margin-left: 5px">
              <ArrowRight />
            </el-icon>
          </el-dropdown-item>
          <el-dropdown-item command="b" @click="logoutApi">退出登录
            <el-icon style="margin-left: 5px">
              <ArrowRight />
            </el-icon>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<style scoped>
.avatar-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  /* 可根据需要调整容器高度 */
  width: 40px;
  /* 可根据需要调整容器宽度 */
  margin-right: 50px;
}

.avatar {
  transition: all 0.3s ease-in-out;
  /* 动画效果 */
}

.custom-dropdown-menu {
  border: none !important;
  /* 移除边框 */
  box-shadow: none !important;
  /* 移除阴影 */
  padding: 0;
}
</style>